import {
  StyleSheet,
  SafeAreaView,
  View,
  Image,
  TouchableOpacity,
  ScrollView,
} from "react-native";
import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import { Colors } from "@/constants/Colors";
import { Ionicons } from "@expo/vector-icons";

// 推荐商品数据
const recommendProducts = [
  {
    id: 1,
    title: "蒙牛洗护香波 长效清洁 1000ml",
    price: 39.0,
    originalPrice: 19.9,
    tag: "好评率98%",
  },
  {
    id: 2,
    title: "福满园农家生态香米 原生态 5KG",
    price: 56.9,
    originalPrice: 19.9,
    tag: "领券满300减30",
  },
  {
    id: 3,
    title: "海南特产生鲜海鲜",
    price: 128.0,
    originalPrice: 19.9,
    tag: "超万用户购买",
  },
  {
    id: 4,
    title: "居力 居家生活",
    price: 299.0,
    originalPrice: 19.9,
    tag: "近7天热销中",
  },
];

// 1. 添加购物车商品数据结构
interface CartItem {
  id: number;
  title: string;
  price: number;
  originalPrice: number;
  quantity: number;
  stock: number;
  checked: boolean;
  specs: string[];
  image: string;
}

// 2. 添加结算栏
const CartFooter = () => {
  return (
    <View style={styles.footer}>
      <TouchableOpacity style={styles.checkAllBtn}>
        <Ionicons name="checkbox" size={20} color={Colors.primary} />
        <ThemedText>全选</ThemedText>
      </TouchableOpacity>
      <View style={styles.priceInfo}>
        <ThemedText>合计: ¥</ThemedText>
        <ThemedText style={styles.totalPrice}>399.00</ThemedText>
      </View>
      <TouchableOpacity style={styles.submitBtn}>
        <ThemedText style={styles.submitText}>结算(2)</ThemedText>
      </TouchableOpacity>
    </View>
  );
};

// 3. 添加商品操作功能
const CartItemActions = () => {
  return (
    <View style={styles.actions}>
      <TouchableOpacity>
        <Ionicons name="heart-outline" size={24} color="#666" />
      </TouchableOpacity>
      <TouchableOpacity>
        <Ionicons name="trash-outline" size={24} color="#666" />
      </TouchableOpacity>
    </View>
  );
};

export default function CartScreen() {
  return (
    <SafeAreaView style={styles.safeArea}>
      <ThemedView style={styles.container}>
        {/* 顶部标题 */}
        <View style={styles.header}>
          <ThemedText style={styles.title}>购物车</ThemedText>
        </View>

        <ScrollView style={styles.content}>
          {/* 空购物车提示 */}
          <View style={styles.emptyContainer}>
            <View style={styles.emptyIconContainer}>
              <Ionicons name="cart" size={32} color="#666" />
            </View>
            <ThemedText style={styles.emptyText}>
              为自己挑选心仪的商品吧
            </ThemedText>
          </View>

          {/* 操作按钮 */}
          <View style={styles.actionContainer}>
            <TouchableOpacity style={styles.actionButton}>
              <ThemedText style={styles.actionText}>优惠活动</ThemedText>
            </TouchableOpacity>
            <TouchableOpacity style={[styles.actionButton, styles.loginButton]}>
              <ThemedText style={styles.loginText}>立即登录</ThemedText>
            </TouchableOpacity>
          </View>

          {/* 分割线 */}
          <View style={styles.divider}>
            <View style={styles.dividerLine} />
            <ThemedText style={styles.dividerText}>你可能还欢</ThemedText>
            <View style={styles.dividerLine} />
          </View>

          {/* 推荐商品列表 */}
          <View style={styles.recommendGrid}>
            {recommendProducts.map((product) => (
              <View key={product.id} style={styles.productItem}>
                <Image
                  source={{
                    uri: "https://tse2-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain",
                  }}
                  style={styles.productImage}
                />
                <ThemedText numberOfLines={2} style={styles.productTitle}>
                  {product.title}
                </ThemedText>
                <View style={styles.productTag}>
                  <ThemedText style={styles.tagText}>{product.tag}</ThemedText>
                </View>
                <View style={styles.priceRow}>
                  <ThemedText style={styles.priceSymbol}>¥</ThemedText>
                  <ThemedText style={styles.price}>
                    {product.price.toFixed(2)}
                  </ThemedText>
                  <ThemedText style={styles.originalPrice}>
                    ¥{product.originalPrice.toFixed(2)}
                  </ThemedText>
                </View>
              </View>
            ))}
          </View>
        </ScrollView>
      </ThemedView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: "#F5F5F5",
  },
  container: {
    flex: 1,
  },
  header: {
    padding: 15,
    backgroundColor: "#FFFFFF",
  },
  title: {
    fontSize: 16,
    color: "#333333",
  },
  content: {
    flex: 1,
  },
  emptyContainer: {
    backgroundColor: "#FFFFFF",
    padding: 20,
    alignItems: "center",
  },
  emptyIconContainer: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: "#F5F5F5",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 12,
  },
  cartIcon: {
    fontSize: 24,
  },
  emptyText: {
    fontSize: 14,
    color: "#666666",
  },
  actionContainer: {
    flexDirection: "row",
    justifyContent: "center",
    gap: 12,
    paddingVertical: 15,
    backgroundColor: "#FFFFFF",
  },
  actionButton: {
    paddingVertical: 6,
    paddingHorizontal: 16,
    borderRadius: 15,
    borderWidth: 1,
    borderColor: "#DDDDDD",
  },
  actionText: {
    fontSize: 13,
    color: "#666666",
  },
  loginButton: {
    backgroundColor: "#FFFFFF",
  },
  loginText: {
    fontSize: 13,
    color: "#666666",
  },
  divider: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 20,
    paddingHorizontal: 15,
    backgroundColor: "#F5F5F5",
  },
  dividerLine: {
    flex: 1,
    height: StyleSheet.hairlineWidth,
    backgroundColor: "#DDDDDD",
  },
  dividerText: {
    paddingHorizontal: 12,
    fontSize: 13,
    color: "#999999",
  },
  recommendGrid: {
    flexDirection: "row",
    flexWrap: "wrap",
    backgroundColor: "#F5F5F5",
    padding: 6,
  },
  productItem: {
    width: "50%",
    padding: 6,
    backgroundColor: "#FFFFFF",
    borderRadius: 8,
    marginBottom: 12,
  },
  productImage: {
    width: "100%",
    aspectRatio: 1,
    backgroundColor: "#F5F5F5",
    borderRadius: 4,
    marginBottom: 8,
  },
  productTitle: {
    fontSize: 13,
    color: "#333333",
    lineHeight: 18,
    marginBottom: 4,
  },
  productTag: {
    alignSelf: "flex-start",
    backgroundColor: "#FFF1F0",
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 2,
    marginBottom: 4,
  },
  tagText: {
    fontSize: 11,
    color: "#FF4D4F",
  },
  priceRow: {
    flexDirection: "row",
    alignItems: "baseline",
  },
  priceSymbol: {
    fontSize: 12,
    color: "#FF4D4F",
    marginRight: 1,
  },
  price: {
    fontSize: 16,
    color: "#FF4D4F",
    fontWeight: "bold",
    marginRight: 4,
  },
  originalPrice: {
    fontSize: 12,
    color: "#999999",
    textDecorationLine: "line-through",
  },
  footer: {
    flexDirection: "row",
    alignItems: "center",
    padding: 15,
    backgroundColor: Colors.background.primary,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: Colors.border.light,
  },
  checkAllBtn: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
  priceInfo: {
    flex: 1,
    flexDirection: "row",
    alignItems: "baseline",
    marginLeft: 15,
  },
  totalPrice: {
    fontSize: 20,
    fontWeight: "bold",
    color: Colors.functional.price,
  },
  submitBtn: {
    backgroundColor: Colors.primary,
    paddingHorizontal: 20,
    paddingVertical: 8,
    borderRadius: 20,
    marginLeft: 15,
  },
  submitText: {
    color: Colors.text.light,
    fontSize: 14,
    fontWeight: "500",
  },
  actions: {
    flexDirection: "row",
    gap: 15,
    padding: 10,
  },
});
